.footer {
    height: 1.3333rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid #ccc;
    z-index: 99;

    .footer-img {
        height: 25px;
        background: no-repeat center center;
        background-size: contain;
        margin-top: 3px;
    }

    .footer-text {
        height: 23px;
        line-height: 23px;
        color: rgb(102, 102, 102);
        font-size: 12px;
    }

    a:nth-of-type(1) .footer-img {
        background-image: url('/img/home.png');
    }

    a:nth-of-type(2) .footer-img {
        background-image: url('/img/type.png');
    }

    a:nth-of-type(3) .footer-img {
        background-image: url('/img/ceo.png');
    }

    a:nth-of-type(4) .footer-img {
        background-image: url('/img/cart.png');
    }

    a:nth-of-type(5) .footer-img {
        background-image: url('/img/mine.png');
    }

    .active .footer-text {
        color: rgb(252, 69, 84);
    }

    .active:nth-of-type(1) .footer-img {
        background-image: url('/img/home-hl.png');
    }

    .active:nth-of-type(2) .footer-img {
        background-image: url('/img/type-hl.png');
    }

    .active:nth-of-type(3) .footer-img {
        background-image: url('/img/ceo-hl.png');
    }

    .active:nth-of-type(4) .footer-img {
        background-image: url('/img/cart-hl.png');
    }

    .active:nth-of-type(5) .footer-img {
        background-image: url('/img/mine-hl.png');
    }
}